<p>En este nuevo capitulo vamos a ver como animar elementos html estableciendo el valor css final al que queremos que nuestra etiqueta html llegue. Por ello vamos a ver el método "Animate".</p>

<p>Para animar un elemento o una selección de los mismos es necesario llamar al método "animate" y como primer atributo le pasaremos valores css que queremos que sean los finales, así contado puede sonar un poco raro pero en el ejemplo se ve muy claramente. Por otro lado, como segundo atributo le podemos la velocidad que queremos que tarde la transición. Este método tiene un pequeño pero que es que sólo puede ser usado con valores css que admitan valores numéricos con lo que por ejemplo no podremos hacer transiciones de colores.  Vamos a ver el ejemplo de una animación:</p>
<pre>
$(document).on('ready', function(){

	$('.jqCap18').css('margin', '0px auto');
	$('.box1').css('margin-bottom', '100px');

	$('#btJuntar').click(function(){
		$('.box1').animate({
				marginBottom:0,
				opacity:0.5
			}, 3000);
	});

	$('#btSeparar').click(function(){
		$('.box1').animate({
				marginBottom:100,
				opacity:1
			}, 3000);
		});
});
</pre>
<p>Este es el código JavaScript el tema de dar valor a los css por JavaScript es porque así ese css no sobrecarga las llamadas al blog cuando sólo es necesario para el ejemplo de esta entrada. El esqueleto que nos va a permitir movernos es el siguiente:</p>
<pre>
<button id="btJuntar">Juntar</button>
<button id="btSeparar">Separar</button>
<div class="ejemplos jqCap18 box1"></div>
<div class="ejemplos jqCap18 box2"></div>
</pre>
<p>Al pulsar el botón de juntar se producirá una animación en el div con clase "box1" hasta que su margin-bottom es igual a cero y su opacidad se establece en 0.5:</p>
<button id="btJuntar">Juntar</button>
<button id="btSeparar">Separar</button>
<div class="ejemplos jqCap18 box1"></div>
<div class="ejemplos jqCap18 box2"></div>


<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo18.js"></script>
<script type="text/javascript">
<!--
jqAnimate();
//-->
</script>

<p>PD: Para el tema de los colores existe un plugin que se llama color-animation (http://www.bitstorm.org/jquery/color-animation/) que ha sido actualizado a la versión 1.8 de jquery pero que al que le han encontrado bugs con esta versión que no han podido ser solventados todavía.</p>